<!doctype html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- 引入 Bootstrap 的CSS样式文件 -->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

	<!-- 引入图标的样式 -->
	<link rel="stylesheet" type="text/css" href="css/fontawesome/all.css">

	<!-- animate.css + wow.js -->
	<link rel="stylesheet" type="text/css" href="css/animate.css">

	<!-- 引入自定义的样式文件 -->
	<link rel="stylesheet" type="text/css" href="css/style.css">

	<title>Title</title>
</head>
<body>
	<!-- 导航部分 -->
	<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">
		<div class="container">
			<a class="navbar-brand brand-style" href="#">手把手课堂</a>
			<button class="navbar-toggler menu-btn-style" type="button" data-toggle="collapse" data-target="#collapseMenu" aria-controls="collapseMenu" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon menu-icon-style"></span>
			</button>
			<div class="collapse navbar-collapse justify-content-end" id="collapseMenu">
				<ul class="navbar-nav">
					<li class="nav-item active">
						<a class="nav-link menu-style" href="#">首页 <span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item">
						<a class="nav-link menu-style" href="#">论坛</a>
					</li>
					<li class="nav-item">
						<a class="nav-link menu-style" href="#">前端开发</a>
					</li>
					<li class="nav-item">
						<a class="nav-link menu-style" href="#">最新课程</a>
					</li>
					<li class="nav-item">
						<a class="nav-link menu-style" href="#">移动APP</a>
					</li>
					<li class="nav-item">
						<a class="nav-link menu-style" href="#">联系我们</a>
					</li>

				</ul>
			</div>
		</div>
	</nav>

	<!-- 主体部分 -->
	<div class="container-fluid">

		<!-- 广告区域  -->
		<div class="row">
			<section id="ad-area">
				<div class="container">
					<!-- //最常用前两个
// data-wow-duration: Change the animation duration 持续时间
// data-wow-delay: Delay before the animation starts 延时多少秒开始
// data-wow-offset: Distance to start the animation (related to the browser bottom)
// data-wow-iteration: Number of times the animation is repeated -->
<div class="row wow fadeInDown" data-wow-duration="1s" data-wow-delay="1s">
	<div class="col-md-1"></div>
	<div class="col-md-10">
		<h1>bootstrap实战课程等你来战！</h1>
		<p>
			<span>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</span><br />
			<span>培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</span>
		</p>
		<img class="img-fluid" src="img/php.png" alt="php">
	</div>
	<div class="col-md-1"></div>
</div>
</div>
</section>
</div>

<!-- 分类区域 -->
<div class="row">
	<section id="category-area">
		<div class="container">
			<div class="row">
				<div class="col-md-4 wow fadeInDown" data-wow-delay="0.2s">
					<a href="" target="_blank">
						<img src="img/a.png" class="img-fluid" alt="Android">
						<h3>Android开发</h3>
						<p>Android开发技术交流、问题求助、实战安全分享</p>
					</a>
				</div>
				<div class="col-md-4 wow fadeInDown" data-wow-delay="0.4s">
					<a href="" target="_blank">
						<img src="img/i.png" class="img-fluid" alt="IOS">
						<h3>IOS开发</h3>
						<p>IOS开发技术交流、海量IOS实战开发</p>
					</a>
				</div>
				<div class="col-md-4 wow fadeInDown" data-wow-delay="0.6s">
					<a href="" target="_blank">
						<img src="img/b.png" class="img-fluid" alt="嵌入式底层开发">
						<h3>嵌入式底层开发</h3>
						<p>底层嵌入式开发、实战案例等技术交流讨论</p>
					</a>
				</div>
			</div>
		</div>
	</section>
</div>

<!-- html区域 -->
<div class="row">
	<section id="html-area">
		<div class="container">
			<div class="row">
				<div class="col-md-6 wow slideInLeft" data-wow-duration="0.5s">
					<div class="warp">
						<h2>HTML5前端开发</h2>
						<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
						<p><span class="icon-style"><i class="fas fa-hand-point-right"></i></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
						<p><span class="icon-style"><i class="fas fa-hand-point-right"></i></span>清晰明了的语义化代码结构，更高的可读性、更利于页面维护的。</p>
					</div>
				</div>
				<div class="col-md-6 wow slideInRight" data-wow-duration="0.5s">
					<div>
						<img src="img/html5.png" class="img-fluid" alt="HTML5">
					</div>
				</div>
			</div>
		</div>
	</section>
</div>

<!-- bootstrap区域 -->
<div class="row">
	<section id="boots-area">
		<div class="container">
			<div class="row">
				<div class="col-md-6 wow slideInLeft" data-wow-duration="1s">
					<img src="img/bootstrap.png" class="img-fluid" alt="bootstrap">
				</div>
				<div class="col-md-6">
					<div class="wrap wow slideInRight" data-wow-duration="1s">
						<h2>bootstrap实战视频教程</h2>
						<p>Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目</p>
						<p><span class="icon-style"><i class="fas fa-hand-point-right"></i></span>你的网站和应用能在Bootstrap的帮助下通过同份代码快速、有效适配手机、平板、PC设备。</p>
						<p><span class="icon-style"><i class="fas fa-hand-point-right"></i></span>Bootstrap 提供了全面、美观的文档。你能在这里找到关于HTML元素、HTML和CSS组件、JQuery插件方面的所有详细文档。</p>
					</div>

				</div>
			</div>
		</div>
	</section>
</div>

<!-- 最新课程区域 -->
<div class="row">
	<section id="course-area">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h2>最新课程</h2>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="0.2s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="0.4s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="0.6s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="0.8s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>

			</div>
			<div class="row">
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="1s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="1.2s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="1.4s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>
				<div class="col-md-3 wow fadeIn" data-wow-duration="2s" data-wow-delay="1.6s">
					<div class="course">
						<img src="img/swift.png" alt="swift" class="img-fluid">
						<a href="#" role="button" class="btn btn-outline-success" target="_blank">加入学习</a>
					</div>
				</div>

			</div>


		</div>
	</section>
</div>

<!-- app下载区域 -->
<div class="row">
	<section id="download-area">
		<div class="container">
			<div class="row">
				<div class="col-md-6 wow fadeInUp" data-wow-duration="1s">
					<div class="wrap">
						<h2>手把手课堂移动APP下载</h2>
						<p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一键收藏，方便自已重复学习，离线下载课程，在哪儿都能开！</p>
						<div class="warp-btns">
							<button type="button" class="btn btn-success"><span class="download-icon-style"><i class="fas fa-download"></i></span>iPhone版</button>
							<button type="button" class="btn btn-success"><span class="download-icon-style"><i class="fas fa-download"></i></span>Android版</button>
						</div>
					</div>
				</div>
				<div class="col-md-6 wow fadeInDown" data-wow-duration="1s">
					<img src="img/app-banner.png" alt="app download" class="img-fluid">
				</div>
			</div>

		</div>
	</section>
</div>

<!-- 联系信息区域 -->
<div class="row">
	<section id="link-area">
		<div class="container">
			<div class="row">
				<div class="col-md-6 wow fadeInLeft" data-wow-duration="1s">
					<div class="wrap">
						<h2><span class="icon-style"><i class="fas fa-location-arrow"></i></span>联系手把手课堂</h2>
						<p>手把手课堂入驻简介。。。</p>
						<address>
							<p><span class="icon-style"><i class="fas fa-home"></i></span>地址：***区</p>
							<p><span class="icon-style"><i class="fas fa-phone-square"></i></span>联系电话：010-110</p>
							<p><span class="icon-style"><i class="fas fa-envelope"></i></i></span>邮箱：11</p>
						</address>
					</div>

				</div>
				<div class="col-md-6 wow fadeInRight" data-wow-duration="1s">
					<form action="" method="post">
						<div class="form-row form-group">
							<div class="col">
								<input type="text" class="form-control" placeholder="您的姓名">
							</div>
							<div class="col">
								<input type="text" class="form-control" placeholder="您的邮箱">
							</div>
						</div>
						<div class="form-row form-group">
							<div class="col">
								<input type="text" class="form-control" placeholder="标题">
							</div>
						</div>
						<div class="form-row form-group">
							<div class="col">
								<textarea class="form-control" rows="3" placeholder="留言"></textarea>
							</div>
						</div>
						<div class="form-row form-group">
							<div class="col">
								<input type="submit" class="btn btn-success btn-block" value="提交">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</section>
</div>

</div>
<!-- 底部 -->
<footer>
	<div>
		<div class="row">
			<div class="col-md-12">
				<p>Copyright&copy; 2018-2022 www.xxx.com **备案号</p>
			</div>
		</div>
	</div>
</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- 引入JS文件，引入的顺序必须为：jquery->popper->bootstrap -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- 把WOW插件初始化 -->
<script type="text/javascript" src="js/wow.js"></script>
<script>

	new WOW().init();
</script>
</body>
</html>